{extend name="public/container"}
{block name="content"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
         <div class="ibox-title">
                <h5>搜索</h5>
                <div class="ibox-content" style="display: block;">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title"  style="width: 100%" autocomplete="off" placeholder="请输入标题" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="search" >
                                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索</button>
                                </label>
                            </div>
                        </div>
                       
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content">
                <div class="table-responsive">
                    <table class="layui-hide" id="List" lay-filter="List"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn" onclick="op_iframe('添加', '{:url('article.articleCategory/form')}',{w:1200,h:700})"><i
                                class="layui-icon layui-icon-add-circle"></i>添加
                            </button>
                            <button class="layui-btn layui-btn-danger" lay-event='delAll'><i
                            class="layui-icon layui-icon-delete"></i>全部删除
                            </button>
                            <button class="layui-btn" lay-event='export'><i
                            class="layui-icon layui-icon-export"></i>导出
                            </button>
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <button type="button" class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-dange" lay-event="delete"><i class="layui-icon layui-icon-edit"></i>删除</button>
                        <!-- <button type="button" class="layui-btn layui-btn-xs" onclick="dropdown(this)">操作 <span class="caret"></span></button>
                        <ul class="layui-nav-child layui-anim layui-anim-upbit">
                            <li>
                                <a href="javascript:void(0);" lay-event="see1">
                                    <i class="layui-icon layui-icon-edit"></i> 操作1</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" lay-event="see2">
                                    <i class="layui-icon layui-icon-edit"></i> 操作2</a>
                            </li>
                        </ul> -->
                    </script>
                    <script type="text/html" id="thumb">
                        <img style="cursor: pointer;width:50px;height:50px;border-radius:50%" class="avatar" lay-event='open_image' src="{{d.image}}">
                     </script>
                     <script type="text/html" id="status">

                        <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{__ADMIN_PATH__}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    layList.form.render();
    var ins = layList.tableList('List',"{:Url('index')}",function () {
           return [
               {"type":"checkbox"},
               {"field":"id","title":"编号","sort":true,'width':'5%','align':'center'},
               {"field":"title","title":"分类昵称","edit":true,'align':'center'},
               {"field":"image","title":"分类图片","align":"center",'templet': '#thumb'},
               {"field":"status","title":"是否显示","align":"center",'templet': '#status'},
               {"fixed":"right","title":"操作","align":"center","toolbar":"#barDemo"}]      
       })
        //查询
        layList.search('search', function (where) {
           layList.reload(where, true);
       });
       //监听并执行排序
       layList.sort(['id', 'sort'], true);
          //快速编辑
          layList.edit(function (obj) {
           var id = obj.data.id, value = obj.value;
           action.set_value(obj.field, id, value);
       });
       layList.form.on('switch(status)', function (obj) {
           action.set_value(this.name, this.value, obj.elem.checked ? 1 : 0);
       });
               //头工具栏事件
               layList.table.on('toolbar(List)', function (obj) {
           var checkStatus = layList.table.checkStatus(obj.config.id);
           switch (obj.event) {
               case 'delAll':
                   var data = checkStatus.data;
                   if (data.length > 0) {
                       var ids = [];
                       for (let index = 0; index < data.length; index++) {
                           ids.push(data[index].id)
                       }
                       action.del(ids);
                   } else {
                       layList.msg('没有选择数据!');
                       return;
                   }

                   break;
               case 'getCheckLength':
                   var data = checkStatus.data;
                   layer.msg('选中了：' + data.length + ' 个');
                   break;
               case 'isAll':
                   layer.msg(checkStatus.isAll ? '全选' : '未全选');
                   break;
               case 'export':
                   var laytable = layList;
                   layList.baseGet('export',{},function(res){
                       laytable.table.exportFile(ins.config.id,res.data,'xls');
                   })
                   break;
           };
       });
       //点击事件绑定
       layList.tool(function (event, data, obj) {
           switch (event) {
               case 'delete':
                   action.del(data.id, obj);
                   break;
               case 'edit':
                   layList.createModalFrame('编辑', 'form/id/' + data.id, {w:1200,h:700});
                   break;
               case 'open_image':
                   layList.openImage(data.image);
                   break;
           }
       })
       
       //自定义方法
       var action = {
           set_value: function (field, id, value) {
               layList.basePost('set_value', { field: field, id: id, value: value }, function (res) {
                   layList.msg(res.msg);
               },function(res){
                   layList.layer.alert(res.msg,{icon:2,title:false});
               });
           },

           del: function (id, obj) {
               layer.confirm('确认删除么？', { icon: 3, title: '警告' }, function () {
                   layList.basePost('del', { id, id }, function (res) {
                       if (res.code == 200) {
                        layList.msg(res.msg, function () {
                                layer.closeAll();
                                if(typeof(obj) != 'undefined'){
                                    $(obj.tr.selector).remove();
                                }else{
                                    layList.reload();
                                } 
                            })
                       }
                   },function(res){
                       layList.msg(res.msg);
                   });
               })
           }
       }
</script>
<!-- <script>

    $('.image_info').on('click',function (e) {
        var image_url = $(this).data('image');
        $eb.openImage(image_url);
    })
    $('.add-filed').on('click',function (e) {
        $eb.createModalFrame(this.innerText,"{:Url('create')}");
    })
    $('.del_config_tab').on('click',function(){

        var _this = $(this),url =_this.data('url');

        $eb.$swal('delete',function(){

            $eb.axios.get(url).then(function(res){

                if(res.status == 200 && res.data.code == 200) {

                    $eb.$swal('success',res.data.msg);

                    _this.parents('tr').remove();

                }else

                    return Promise.reject(res.data.msg || '删除失败')

            }).catch(function(err){

                $eb.$swal('error',err);

            });

        })

    });
    $('.add_filed_base').on('click',function (e) {
        $eb.swal({
            title: '请选择数据类型',
            input: 'radio',
            inputOptions: ['文本框','多行文本框','单选框','文件上传','多选框'],
            inputValidator: function(result) {
                return new Promise(function(resolve, reject) {
                    if (result) {
                        resolve();
                    } else {
                        reject('请选择数据类型');
                    }
                });
            }
        }).then(function(result) {
            if (result) {
                $eb.createModalFrame(this.innerText,"{:Url('SystemConfig/create')}?type="+result);
            }
        })
    })
</script> -->
{/block}